<template>
    <section id="template">
        <div class="title-sec">
            <img :src="serverUrl+'/previewModel/bg.png'"/>
            <p class="text-center text-why" maxlength="10">{{content.headerTitle2}}</p>
            <p class="text-detail">{{content.headerContain}}</p>
        </div>
        <h2 class="text-center">{{content.pageheaderTitle1}}</h2>
        <p class="text-sub">{{content.pageheaderTitle2}}</p>
        <div class="apartment-sec">
            <img :src="content.Imgurl"/>
            <div class="apartment-detail">
                <p class="apartment-title">{{content.decTitle}}</p>
                <p class="apartment-text">{{content.decContain}}</p>
            </div>
        </div>
        <p class="text-apert">{{content.detailContain1}}</p>
        <div class="slide1-sec">
            <mt-swipe :auto="4000" class="swiper-img">
                <mt-swipe-item v-for="(item,index) in content.imageFile" :key="item.imgUrl"><img :src="item.imgUrl"/></mt-swipe-item>
            </mt-swipe>
            <p class="slide1-title">{{content.slide1Title1}}</p>
            <p class="slide1-sub">{{content.slide1Title2}}</p>
            <p class="slide1-detail">{{content.slide1Contain1}}</p>
        </div>
        <div class="slide2-sec">
            <mt-swipe :auto="4000" class="swiper-img">
                <mt-swipe-item v-for="(item,index) in content.imageFile2" :key="item.imgUrl"><img :src="item.imgUrl"/></mt-swipe-item>
            </mt-swipe>
            <div class="slide2-bot">
                <div>
                    <p class="slide2-title text-right">{{content.slide2Title1}}</p>
                    <p class="slide2-sub text-right">{{content.slide2Title2}}</p>
                </div>
                <div>
                    <p class="slide2-r">{{content.slide2Contain1}}</p>
                </div>
            </div>
        </div>
        <div class="slide3-sec">
            <div class="slide3-bg"></div>
            <mt-swipe :auto="4000" class="slide3-main swiper-img">
                <mt-swipe-item v-for="(item,index) in content.imageFile3" :key="item.imgUrl"><img :src="item.imgUrl"/></mt-swipe-item>
            </mt-swipe>
            <div class="slide3-bot">
                <div>
                    <p class="slide3-title">{{content.footContain1}}</p>
                </div>
                <div>
                    <p class="slide3-r">{{content.footTitle1}}</p>
                    <p class="slide3-sub">{{content.footContain2}}</p>
                </div>
            </div>
        </div>
        <div class="tel-sec">
            <p class="tel-title">请填写手机号，置业顾问将以‭{{telephone}}联络您。</p>
            <div class="tel-sec1">
                <input type="tel" v-model="phone" placeholder="手机号"/>
                <div class="btn text-center" @click="getVerifyFn">{{verifyText}}</div>
            </div>
            <div class="tel-sec1">
                <input type="tel" placeholder="验证码" v-model="verify"/>
                <div class="btn text-center" @click="submit">提交</div>
            </div>
            <div class="tel-bot">
                <div class="tel-main">
                    <div class="tel-btn" @click="contactCounselor">
                        <p>在线顾问</p>
                        <i></i>
                    </div>
                    <div class="coun-btn">
                        <a v-on:click="trackTel" :href="'tel:'+telephone">
                            <p>电话咨询</p>
                            <i></i>
                        </a>
                    </div>
                </div>
                <img :src="appQrCode" class="code-img" v-if="appQrCode==''?false:true"/>
                <p class="text-center text-code" v-if="appQrCode==''?false:true">扫描下载APP</p>
                <div class="edite-code">
                    <img :src="content.finalImg"/>
                    <div class="code-title">
                        <p class="title">{{content.finalTitle1}}</p>
                        <p class="sub-title">{{content.finalTitle2}}</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<script>
import util from "../utils/util";
import ubt from '../utils/ubt.js'
import configMes from '../utils/configMes.js'
import {previewService} from '@/services'
import { Toast } from "mint-ui";
import _ from 'lodash'
import queryString from 'query-string'
const parsed = queryString.parse(location.search);
const code = parsed.code || null;

    export default {
        data() {
            var serverUrl="http://skyforest.static.elab-plus.com";
            return {
                serverUrl:serverUrl,
                templateContentId:'',
                phone:'',//手机号
                //title:'投放宝',
                customerId:'',//在线顾问跳转变量
                isSend:'', //是否跟顾问聊过天
                verifyText:'获取验证码',//验证码文案
                templateId:'',//模板ID
                projectId:'',//项目ID
                imgUrl:'',//空白模板图片
                templateType:'',//模板类型
                verify:'',//验证码
                houseid:'',
                channel:'',//渠道
                appcodeImg:'',//底部二维码
                sharerImage:'',//二维码
                sendingCode:false,//控制验证码
                uid:'',//uid
                source:'',//来源
                sessionId:'',//sessionId
                id:'',//投放内容ID
                onlineFlag:'',//在线状态控制
                telephone:'',//底部电话号码
                appQrCode:'',//底部二维码
            }
        },
        props:{
            content:Object,
        },
        watch:{
            content(val){
                this.content=val
            },

        },
        created(){
            // /util.setTitle(this.title);

            //this.projectId = localStorage.getItem('_projectId');

            this.templateContentId = this.$route.query.templateContentId;

            if(this.projectId){//绑定小程序
                this.source = '3';
            }
            if(this.templateContentId){//未绑定小程序
                this.source = '4';
            }

            if(this.sendingCode){
                this.getVerifyFn();
            }

        },
        mounted() {
            console.log(this.content,'oooooooooooooooo')
            try{
             window.getWidth= function(){
                if(window.innerWidth!= undefined){
                    return window.innerWidth;
                }
                else{
                    var B= document.body, D= document.documentElement;
                    return B==null?D.clientWidth:Math.min(D.clientWidth, B.clientWidth);
                }
            }
            console.log("******",window.getWidth(),innerWidth)
            let mywidth= window.getWidth() > 640?"640":window.getWidth();
            document.documentElement.style.fontSize = 100 * mywidth / 750 + 'px';
            }
            catch(e){
                alert(e.message);
            }
            this.telephone = this.$store.state.tfbContent1.telephone;
            this.appQrCode = this.$store.state.tfbContent1.appQrCode;
            //this.appcodeImg = this.$store.state.tfbContent1.appQrCode;
        },
        updated(){

        },
        beforeDestroy(){
            document.documentElement.style.fontSize ='16px';
        },
        methods: {
            async layPointFn(){//进入页面埋点
                let data = {
                    projectId:this.projectId,
                    system:this.source,
                    tfbContentId:this.id,
                    uid:this.uid,
                    version:"1.0",
                    sessionId:this.sessionId,
                    source:this.source,
                    keyvalue:"tfb.laypoint.page.enter"
                }
                console.log(data,'//////////////')
                let result = await previewService.layPoint(data);
                if(result.data.success){

                }
            },
            async telData(){//提交
                let data = {
                    houseId: this.houseid,
                    customerMobile: this.phone,
                    sharerImage: this.sharerImage,
                    channel:this.channel,
                    refer:location.href
                };
                let result = await previewService.layPoint(data);
                if (!result.data.success) {
                    Toast(result.data.message);
                    return;
                } else {
                    Toast('提交成功');

                    ubt.trackEvent(this.$route.meta.pageid, 'sfc.tfb.h5.submittation.appointment', '', '', 'appointment', 'click', this.title,'','','','','',this.$route.query.fromChannel,this.phone);
                }
            },
            async verifyCodeFn(){//验证码
                let data = {
                    sms_mobile: this.phone,
                    sms_template: 'verification.code.login',
                    sms_code: 'SMS_004',
                    sms_type: '1',
                    sms_params: '{"":""}'
                };

                let result = await previewService.verifyCode(data);
                if(result.data.success){
                    ubt.trackEvent(this.$route.meta.pageid, 'sfc.tfb.h5.codetation.appointment', '', '', 'appointment', 'click', this.title,'','','','','',this.$route.query.fromChannel,this.phone);
                }
            },
            getVerifyFn() {
                let vm = this;
                if (this.sendingCode) {
                    return;
                }

                if (!this.phone) {
                    Toast('请输入手机号');
                    return;
                }

                if (!/^1\d{10}$/.test(this.phone)) {
                    Toast('输入的手机号不合法');
                    return;
                }

                this.verifyCodeFn();

                this.sendingCode = true;
                this.timeFlag = true;
                let time = 60;
                vm.verifyText = time + 's';
                let timer = setInterval(() => {
                    if (time > 0) {
                        time = time - 1;
                        vm.verifyText = time + 's';
                        //vm.colorAaa='background-color: #aaa';
                    } else {
                        vm.sendingCode = false;
                        vm.timeFlag = false;
                        clearInterval(timer);
                    }
                }, 1000)
            },
            submit(){
                let vm = this;

                if (!vm.phone) {
                    Toast('请输入手机号');
                    return;
                }
                if (!/^1\d{10}$/.test(this.phone)) {
                    Toast('输入的手机号不合法');
                    return;
                }

                if (!vm.verify) {
                    Toast('请输入验证码');
                    return;
                }
                this.telData();
            },
            trackTel(){//电话咨询
                ubt.trackEvent(this.$route.meta.pageid,'sfc.nb.h5.tfbteltation.local.call', '', '', 'call', 'click', this.title,'','','','','',this.$route.query.fromChannel);
            },
            contactCounselor(){
                if(this.isSend&&this.customerId){
                    this.$router.push({ name: "messageList",query:{pathName:this.$route.name} });
                }else{
                    this.$router.push({ name: "AdviserList" ,query:{pathName:this.$route.name} });
                }
            },
        }
    }
</script>

<style lang="scss" scoped>
    //@media screen and (max-width:768px) {
        body,html,#app{
            max-width: 640px!important;
            background: #f4f4f4;
            color: #737373;
            height: 100%;
        };
        #template{
            max-width: 640px!important;
            margin:0 auto;
        }
        .title-sec{
            position: relative;
            margin-bottom:35px;
            img{
                width:100%;
                display: block;
            }
            p{
                width:100%;
                position: absolute;
                left:0;
                color:#fff;
                margin:0;
            }
            .text-why{
                font-size:0.26rem;
                top:0.5rem;
            }
            .text-detail{
                width:80%;
                padding-top:10px;
                border-top:1px solid #fff;
                top:0.98rem;
                left:10%;
                font-size:0.24rem;
            }
        }
        p{
            word-wrap:break-word;
        }
        h2{
            font-size: 0.62rem;
            line-height: 0.92rem;
            margin:0;
            color: #737373;
        }
        .text-sub{
            width:85%;
            margin:0 auto 35px;
            padding-top:5px;
            font-size: 0.34rem;
            color: #737373;
            border-top:1px solid #737373;
        }
        .apartment-sec{
            width:100%;
            height:3.2rem;
            background-color: #CDC9BE;
            padding:0 5%;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            position: relative;
            img{
                width:2.3rem;
                height:3.2rem;
                position: absolute;
                top:0.4rem;
            }
            .apartment-detail{
                width:48%;
                height:120px;
                padding-left:0.4rem;
                border-left:1px solid #737373;
                position: absolute;
                top:0.4rem;
                right:5%;
            }
            .apartment-title{
                font-size: 0.34rem;
                color: #737373;
                margin:0 0 6px;
            }
            .apartment-text{
                font-size: 0.18rem;
                color: #737373;
                margin:0;
            }
        }
        .text-apert{
            width:5.53rem;
            margin:1.22rem auto 0.82rem;
            font-size: 0.24rem;
            color: #737373;
            line-height:0.36rem;
        }
        .swiper-img,.swiper-img img{
            width:6.7rem;
            height:4.52rem;
            overflow: visible;
        }
        .slide1-sec{
            background-color: #CDC9BE;
            padding:0.4rem;
            .slide1-title{
                font-size: 0.34rem;
                color: #454545;
                margin:0.32rem 0 0;
                line-height:0.5rem;
            }
            .slide1-sub{
                width:6.7rem;
                border-top:1px solid #454545;
                font-size: 0.24rem;
                color: #454545;
                line-height:0.36rem;
                margin:0;
            }
            .slide1-detail{
                margin:0.3rem auto 0.08rem;
                font-size: 0.24rem;
                color: #454545;
            }
        }
        .slide2-sec{
            padding:0.4rem;
            margin-top:0.7rem;
            .slide2-bot{
                margin:0.64rem 0 0.33rem 0;
                display: flex;

                div:first-child{
                    margin-right:0.22rem;
                    width:calc(50% - 0.02rem);
                }
                div:last-child{
                    width:calc(50% - 0.2rem);
                }
                .slide2-title{
                    margin:0;
                    font-size: 0.32rem;
                    color: #737373;
                    line-height: 0.5rem;
                    border-bottom:1px solid #737373;
                }
                .slide2-sub{
                    font-size: 0.24rem;
                    color: #737373;
                    margin:0 0 0 -0.3rem;
                }
                .slide2-r{
                    font-size: 0.24rem;
                    color: #737373;
                    margin:0;
                }
            }
        }
        .slide3-sec{
            position: relative;
            .slide3-bg{
                width:100%;
                height:4.52rem;
                background-color: #CDC9BE;
            }
            .slide3-main{
                width:6.7rem;
                position: absolute;
                top:0.4rem;
                left:0.4rem;
            }
            .slide3-bot{
                padding:0.72rem 0.4rem 0.7rem;
                display: flex;
                div{
                    flex:1;
                }
                div:first-child{
                    margin-right:0.32rem;
                    width:calc(50% - 0.16rem);
                }
                div:last-child{
                    width:calc(50% - 0.16rem);
                }
                .slide3-title{
                    font-size: 0.24rem;
                    line-height:0.36rem;
                    color: #737373;
                    margin:0;
                }
                .slide3-r{
                    border-bottom:1px solid #737373;
                    font-size: 0.34rem;
                    color: #737373;
                    margin:0;
                }
                .slide3-sub{
                    font-size: 0.24rem;
                    color: #737373;
                    margin:0;
                }
            }
        }
        .tel-sec{
            background-color: #CDC9BE;
            padding:0.55rem 0.4rem 0;
            .tel-title{
                color:#fff;
                font-size: 0.24rem;
                color: #FFFFFF;
                line-height:0.36rem;
                margin-top:0;
            }
            .tel-sec1{
                display: flex;
                align-items: center;
                padding:0;
                margin-bottom: 0.2rem;
                input{
                    flex:2;
                    height:0.6rem;
                    border-radius: 0.08rem;
                    outline: none;
                    border:none;
                    padding-left:0.2rem;
                }
                div{
                    height:0.6rem;
                    line-height:0.6rem;
                    font-size: 0.26rem;
                    color: #FFFFFF;
                    background: #737373;
                    box-shadow: 0 5px 28px 0 rgba(0,0,0,0.39);
                    border-radius: 0.08rem;
                    flex: 1;
                    margin-left:0.2rem;
                }
            }
            .tel-bot{
                margin-top:0.6rem;
                padding-top:0.6rem;
                border-top:1px solid #737373;
                .tel-main{
                    display: flex;
                    width:5rem;
                    height:0.8rem;
                    margin:0 auto;
                    font-size: 0.3rem;
                    color: #737373;
                    p{
                        position: absolute;
                        right:0.45rem;
                        top:50%;
                        transform: translateY(-50%);
                        -webkit-transform: translateY(-50%);
                        margin:0;
                    }
                    a{
                        color: #737373;
                    }
                    i{
                        width:0.38rem;
                        height:0.38rem;
                        display: block;
                        position: absolute;
                        left:0.4rem;
                        top:50%;
                        transform: translateY(-50%);
                        -webkit-transform: translateY(-50%);
                    }
                    .tel-btn{
                        flex: 1;
                        border-radius: 1rem 0 0 1rem;
                        background-color: #fff;
                        border-right:1px solid #CDC9BE;
                        position: relative;
                        i{
                            background: url('http://skyforest.static.elab-plus.com/previewModel/counselor.png');
                            background-size: 100% 100%;
                        }
                    }
                    .coun-btn{
                        flex: 1;
                        border-radius: 0 1rem 1rem 0;
                        background-color: #fff;
                        position: relative;
                        i{
                            background: url('http://skyforest.static.elab-plus.com/previewModel/tel.png');
                            background-size: 100% 100%;
                        }
                    }
                }
                .code-img{
                    width:2.4rem;
                    height:2.4rem;
                    border:0.06rem solid #fff;
                    box-sizing: border-box;
                    -webkit-box-sizing: border-box;
                    margin:1.6rem auto 0.4rem;
                    display: block;
                }
                .text-code{
                    font-size: 0.24rem;
                    color: #737373;
                    line-height:0.33rem;
                    margin:0;
                }
                .edite-code{
                    padding:1.22rem  0.4rem 0.46rem;
                    position: relative;
                    img{
                        width:1.11rem;
                        height:1.11rem;
                        background-color: #fff;
                        display: block;
                        // position: absolute;
                        // left:0.4rem;
                    }
                    .code-title{
                        width:4.8rem;
                        position: absolute;
                        bottom:0.46rem;
                        right:0;
                        .title{
                            font-size: 0.28rem;
                            color: #737373;
                            border-bottom:1px solid #737373;
                            margin:0;
                            line-height:0.4rem;
                        }
                        .sub-title{
                            font-size: 0.24rem;
                            color: #737373;
                            line-height:0.33rem;
                            margin:0;
                        }
                    }
                }
            }
        }
    //}

// @media screen and (min-width:768px){
//     body,html,#app{
//         max-width: 750px!important;
//         background: #f4f4f4;
//         color: #737373;
//         height: 100%;
//     };
//     #template{
//         max-width: 750px!important;
//         margin:0 auto;
//     }
//     .title-sec{
//         position: relative;
//         margin-bottom:35px;
//         img{
//             width:100%;
//             display: block;
//         }
//         p{
//             width:100%;
//             position: absolute;
//             left:0;
//             color:#fff;
//             margin:0;
//         }
//         .text-why{
//             font-size:26px;
//             top:50px;
//         }
//         .text-detail{
//             width:80%;
//             padding-top:10px;
//             border-top:1px solid #fff;
//             top:98px;
//             left:10%;
//             font-size:24px;
//         }
//     }
//     h2{
//         font-size: 62px;
//         line-height: 92px;
//         margin:0;
//         color: #737373;
//     }
//     .text-sub{
//         width:85%;
//         margin:0 auto 35px;
//         padding-top:5px;
//         font-size: 34px;
//         color: #737373;
//         border-top:1px solid #737373;
//     }
//     .apartment-sec{
//         width:100%;
//         height:320px;
//         background-color: #CDC9BE;
//         padding:0 5%;
//         box-sizing: border-box;
//         -webkit-box-sizing: border-box;
//         position: relative;
//         img{
//             position: absolute;
//             top:40px;
//         }
//         .apartment-detail{
//             width:270px;
//             height:120px;
//             padding-left:40px;
//             border-left:1px solid #737373;
//             position: absolute;
//             top:40px;
//             right:5%;
//         }
//         .apartment-title{
//             font-size: 34px;
//             color: #737373;
//             margin:0 0 6px;
//         }
//         .apartment-text{
//             font-size: 18px;
//             color: #737373;
//             margin:0;
//         }
//     }
//     .text-apert{
//         width:530px;
//         margin:122px auto 82px;
//         font-size: 24px;
//         color: #737373;
//         line-height:36px;
//     }
//     .slide1-sec{
//         background-color: #CDC9BE;
//         padding:40px;
//         .slide1-title{
//             font-size: 34px;
//             color: #454545;
//             margin:0;
//             line-height:50px;
//         }
//         .slide1-sub{
//             width:670px;
//             border-top:1px solid #454545;
//             font-size: 24px;
//             color: #454545;
//             line-height:36px;
//             margin:0;
//         }
//         .slide1-detail{
//             margin:30px auto 8px;
//             font-size: 24px;
//             color: #454545;
//         }
//     }
//     .slide2-sec{
//         padding:40px;
//         margin-top:70px;
//         .slide2-bot{
//             margin:32px 40px 33px 19px;
//             display: flex;
//             div:first-child{
//                 margin-right:22px;
//             }
//             .slide2-title{
//                 width:335px;
//                 margin:0;
//                 font-size: 34px;
//                 color: #737373;
//                 line-height: 50px;
//                 border-bottom:1px solid #737373;
//             }
//             .slide2-sub{
//                 font-size: 24px;
//                 color: #737373;
//             }
//             .slide2-r{
//                 font-size: 20px;
//                 color: #737373;
//                 margin:0;
//             }
//         }
//     }
//     .slide3-sec{
//         position: relative;
//         .slide3-bg{
//             width:100%;
//             height:452px;
//             background-color: #CDC9BE;
//         }
//         .slide3-main{
//             width:670px;
//             position: absolute;
//             top:40px;
//             left:40px;
//         }
//         .slide3-bot{
//             padding:32px 40px 70px;
//             display: flex;
//             div{
//                 flex:1;
//             }
//             div:first-child{
//                 margin-right:32px;
//             }
//             .slide3-title{
//                 font-size: 24px;
//                 line-height:36px;
//                 color: #737373;
//                 margin:0;
//             }
//             .slide3-r{
//                 border-bottom:1px solid #737373;
//                 font-size: 34px;
//                 color: #737373;
//                 margin:0;
//             }
//             .slide3-sub{
//                 font-size: 24px;
//                 color: #737373;
//                 margin:0;
//             }
//         }
//     }
//     .tel-sec{
//         background-color: #CDC9BE;
//         padding:55px 40px 0;
//         .tel-title{
//             color:#fff;
//             font-size: 24px;
//             color: #FFFFFF;
//             line-height:36px;
//             margin-top:0;
//         }
//         .tel-sec1{
//             display: flex;
//             align-items: center;
//             padding:0;
//             margin-bottom: 20px;
//             input{
//                 flex:2;
//                 height:60px;
//                 border-radius: 8px;
//                 outline: none;
//                 border:none;
//                 padding-left:20px;
//             }
//             div{
//                 height:60px;
//                 line-height:60px;
//                 font-size: 26px;
//                 color: #FFFFFF;
//                 background: #737373;
//                 box-shadow: 0 5px 28px 0 rgba(0,0,0,0.39);
//                 border-radius: 8px;
//                 flex: 1;
//                 margin-left:20px;
//             }
//         }
//         .tel-bot{
//             margin-top:60px;
//             padding-top:60px;
//             border-top:1px solid #737373;
//             .tel-main{
//                 display: flex;
//                 width:500px;
//                 height:80px;
//                 margin:0 auto;
//                 font-size: 30px;
//                 color: #737373;
//                 p{
//                     position: absolute;
//                     right:45px;
//                     top:50%;
//                     transform: translateY(-50%);
//                     -webkit-transform: translateY(-50%);
//                     margin:0;
//                 }
//                 a{
//                     color: #737373;
//                 }
//                 i{
//                     width:38px;
//                     height:38px;
//                     display: block;
//                     position: absolute;
//                     left:40px;
//                     top:50%;
//                     transform: translateY(-50%);
//                     -webkit-transform: translateY(-50%);
//                 }
//                 .tel-btn{
//                     flex: 1;
//                     border-radius: 100px 0 0 100px;
//                     background-color: #fff;
//                     border-right:1px solid #CDC9BE;
//                     position: relative;
//                     i{
//                         background: url('http://skyforest.static.elab-plus.com/previewModel/counselor.png');
//                         background-size: 100% 100%;
//                     }
//                 }
//                 .coun-btn{
//                     flex: 1;
//                     border-radius: 0 100px 100px 0;
//                     background-color: #fff;
//                     position: relative;
//                     i{
//                         background: url('http://skyforest.static.elab-plus.com/previewModel/tel.png');
//                         background-size: 100% 100%;
//                     }
//                 }
//             }
//             .code-img{
//                 width:240px;
//                 height:240px;
//                 border:6px solid #fff;
//                 box-sizing: border-box;
//                 -webkit-box-sizing: border-box;
//                 margin:160px auto 40px;
//                 display: block;
//             }
//             .text-code{
//                 font-size: 24px;
//                 color: #737373;
//                 line-height:33px;
//                 margin:0;
//             }
//             .edite-code{
//                 padding:122px  40px 46px;
//                 position: relative;
//                 img{
//                     width:111px;
//                     height:111px;
//                     background-color: #fff;
//                     display: block;
//                     // position: absolute;
//                     // left:0.4rem;
//                 }
//                 .code-title{
//                     width:480px;
//                     position: absolute;
//                     bottom:46px;
//                     right:0;
//                     .title{
//                         font-size: 28px;
//                         color: #737373;
//                         border-bottom:1px solid #737373;
//                         margin:0;
//                         line-height:40px;
//                     }
//                     .sub-title{
//                         font-size: 24px;
//                         color: #737373;
//                         line-height:33px;
//                         margin:0;
//                     }
//                 }
//             }
//         }
//     }
// }
</style>
<style>
    .mint-swipe-indicator.is-active{
        background-color: #fff;
        opacity:1;
    }
</style>
